<template>
  <div class="category-manager wap">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}">
      <span>商品分类</span>
      <div class="overwrite-title-right" slot="right" @click="addCategory(-1)">新增分类</div>
    </x-header>

    <div class="main">
      <draggable
        :list="categoryList"
        class="list-group"
        ghost-class="ghost"
        :move="checkMove"
        @start="dragging = true"
        @end="dragging = false"
        v-if="!isOpenGoods"
        handle=".handle"
      >
        <div class="item vux-1px-b" v-for="(item,index) in categoryList" :key="item.id">
          <!--<div  @touchstart="showDeleteButton(item,index)" @touchend="clearLoop(item)" class="header display-flex justify-content-flex-justify align-items-center">-->

          <div class="header display-flex justify-content-flex-justify align-items-center">
            <img src="../../assets/img/customer/move_sort.png" alt class="handle" />

            <div class="flex-1 beyond-one" @click="showDeleteButton(item,index)">
              <span class="customer-type-name">{{item.name}}</span>
            </div>
            <div>
              <span class="add-customer" @click="addCustomer(item)">
                新增商品
                <!-- <x-icon size="20" type="ios-plus-empty" class="icon-gray"></x-icon> -->
              </span>
              <span class="add-customer" @click="addCategory(item.id, categoryList)">
                新增分类
                <!-- <x-icon size="20" type="ios-plus-empty" class="icon-gray"></x-icon> -->
              </span>
              <!--<span class="add-customer" @click="addCustomer(item)">新增商品 <x-icon size="20" type="ios-plus-empty"
              class="icon-gray"></x-icon></span>-->
              <span class="expand" @click="expandList(item,index)">
                {{lastSelectIndex===index?'收起':'展开'}}
                <!-- <x-icon
                  size="15"
                  v-if="lastSelectIndex===index"
                  type="ios-arrow-up"
                  class="icon-blue"
                ></x-icon>-->
                <!-- <x-icon
                  size="15"
                  v-if="lastSelectIndex!==index"
                  type="ios-arrow-down"
                  class="icon-blue"
                ></x-icon>-->
              </span>
            </div>
          </div>
          <template v-if="lastSelectIndex===index">
            <goodMangerItem
              :erpStatus="erpStatus"
              @dialogComfrim="moveDialogComfrim"
              :checkListArray="checkListArray"
              :useType="2"
              :list="item.goodsList"
              @refeshData="refresh(item)"
            ></goodMangerItem>
            <div
              v-if="item.goodsList&&item.goodsList.length>=5"
              @click="showMore(item)"
              class="more display-flex justify-content-flex-center align-items-center"
            >
              <span>进入分类,查看更多</span>
              <x-icon type="ios-arrow-right" size="15"></x-icon>
            </div>
          </template>

          <!--二级分类-->
          <div class="list" v-if="lastSelectIndex===index">
            <div
              class="item"
              style="padding: 0 .15rem"
              v-for="(cItem,cIndex) in categoryList[lastSelectIndex]['children']"
              :key="cItem.id"
            >
              <!--<div  @touchstart="showDeleteButton(item,index)" @touchend="clearLoop(item)" class="header display-flex justify-content-flex-justify align-items-center">-->

              <div class="header display-flex justify-content-flex-justify align-items-center">
                <img src="../../assets/img/customer/move_sort.png" alt class="handle" />

                <div class="flex-1 beyond-one" @click="showDeleteButton(cItem,cIndex)">
                  <span class="customer-type-name">{{cItem.name}}</span>
                </div>
                <div>
                  <span class="add-customer" @click="addCustomer(cItem)">
                    新增商品
                    <!-- <x-icon size="20" type="ios-plus-empty" class="icon-gray"></x-icon> -->
                  </span>
                  <span
                    class="add-customer"
                    @click="addCategory(cItem.id, categoryList[lastSelectIndex]['children'])"
                  >
                    新增分类
                    <!-- <x-icon size="20" type="ios-plus-empty" class="icon-gray"></x-icon> -->
                  </span>
                  <span class="expand" @click="expandListSecond(cItem, cIndex)">
                    {{(lastSelectIndex===index && secondSelectIndex === cIndex)?'收起':'展开'}}
                    <!-- <x-icon
                      size="15"
                      v-if="secondSelectIndex === cIndex"
                      type="ios-arrow-up"
                      class="icon-blue"
                    ></x-icon>
                    <x-icon
                      size="15"
                      v-if="secondSelectIndex !== cIndex"
                      type="ios-arrow-down"
                      class="icon-blue"
                    ></x-icon>-->
                  </span>
                </div>
              </div>
              <template v-if="(lastSelectIndex===index && secondSelectIndex === cIndex)">
                <goodMangerItem
                  :erpStatus="erpStatus"
                  @dialogComfrim="moveDialogComfrim"
                  :checkListArray="checkListArray"
                  :useType="2"
                  :list="cItem.goodsList"
                  @refeshData="refresh(cItem)"
                ></goodMangerItem>
                <div
                  v-if="cItem.goodsList&&cItem.goodsList.length>=5"
                  @click="showMore(cItem)"
                  class="more display-flex justify-content-flex-center align-items-center"
                >
                  <span>进入分类,查看更多</span>
                  <x-icon type="ios-arrow-right" size="15"></x-icon>
                </div>
              </template>

              <!--三级分类-->
              <div class="list" v-if="secondSelectIndex===cIndex">
                <div
                  class="item"
                  style="padding: 0 .15rem"
                  v-for="(ccItem,ccIndex) in categoryList[lastSelectIndex]['children'][secondSelectIndex]['children']"
                  :key="ccItem.id"
                >
                  <!--<div  @touchstart="showDeleteButton(item,index)" @touchend="clearLoop(item)" class="header display-flex justify-content-flex-justify align-items-center">-->

                  <div class="header display-flex justify-content-flex-justify align-items-center">
                    <img src="../../assets/img/customer/move_sort.png" alt class="handle" />

                    <div class="flex-1 beyond-one" @click="showDeleteButton(ccItem,ccIndex)">
                      <span class="customer-type-name">{{ccItem.name}}</span>
                    </div>
                    <div>
                      <!--<span class="add-customer" @click="addCategory(item.pid)">新增分类 <x-icon size="20" type="ios-plus-empty"-->
                      <!--class="icon-gray"></x-icon></span>-->
                      <span class="add-customer" @click="addCustomer(ccItem)">
                        新增商品
                        <!-- <x-icon size="20" type="ios-plus-empty" class="icon-gray"></x-icon> -->
                      </span>
                      <span class="expand" @click="expandListThree(ccItem, ccIndex)">
                        {{(lastSelectIndex===index && secondSelectIndex === cIndex && threeSelectIndex === ccIndex)?'收起':'展开'}}
                        <!-- <x-icon
                          size="15"
                          v-if="threeSelectIndex === ccIndex"
                          type="ios-arrow-up"
                          class="icon-blue"
                        ></x-icon>
                        <x-icon
                          size="15"
                          v-if="threeSelectIndex !== ccIndex"
                          type="ios-arrow-down"
                          class="icon-blue"
                        ></x-icon>-->
                      </span>
                    </div>
                  </div>
                  <template
                    v-if="(lastSelectIndex===index && secondSelectIndex === cIndex && threeSelectIndex === ccIndex)"
                  >
                    <goodMangerItem
                      :erpStatus="erpStatus"
                      @dialogComfrim="moveDialogComfrim"
                      :checkListArray="checkListArray"
                      :useType="2"
                      :list="ccItem.goodsList"
                      @refeshData="refresh(ccItem)"
                    ></goodMangerItem>
                    <div
                      v-if="ccItem.goodsList&&ccItem.goodsList.length>=5"
                      @click="showMore(ccItem)"
                      class="more display-flex justify-content-flex-center align-items-center"
                    >
                      <span>进入分类,查看更多</span>
                      <x-icon type="ios-arrow-right" size="15"></x-icon>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </draggable>
    </div>

    <div v-transfer-dom>
      <x-dialog v-model="dialog" :hide-on-blur="true">
        <div class="category-dialog">
          <div class="category-title" v-if="dialogType==0">新增分类:</div>
          <div class="category-title" v-if="dialogType==1">修改分类:</div>
          <group v-if="level != 0">
            <selector
              placeholder="上级分类(可置为空)"
              v-model="demo02"
              :options="list"
              @on-change="classifySelect"
            ></selector>
          </group>
          <input
            maxlength="20"
            v-model="categoryName"
            class="category-input normal-input"
            placeholder="请输入分类名称"
            type="text"
          />
        </div>
        <div class="btn-comfirm-container" v-if="dialogType==0">
          <div
            class="btn-comfirm align-items-center display-flex justify-content-flex-center"
            v-btn-control
            @click="closeDialog($event)"
          >
            <span>确定</span>
          </div>
        </div>

        <div class="btn-comfirm-container category-dialog-bottom" v-if="dialogType==1">
          <!--<div>删除分类</div>-->
          <!--<div>保存</div>-->
          <div
            class="btn-del-category align-items-center display-flex justify-content-flex-center"
            v-btn-control
            @click="delCategory"
          >
            <span>删除分类</span>
          </div>
          <div
            class="btn-save-categroy align-items-center display-flex justify-content-flex-center"
            @click="updateCategory"
          >
            <span>保存</span>
          </div>
        </div>
      </x-dialog>
    </div>
    <tipDialog ref="tipDialog" :tipContent="tipContent"></tipDialog>
  </div>
</template>
<script>
import goodMangerItem from "../../components/good-manager-item.vue";
import draggable from "vuedraggable";
import tipDialog from "../../components/tip-dialog.vue";

export default {
  name: "category",
  components: {
    goodMangerItem,
    draggable,
    tipDialog,
  },
  data() {
    return {
      demo02: "",
      dialog: false,
      categoryList: [],
      lastSelectIndex: "",
      secondSelectIndex: "",
      threeSelectIndex: "",
      checkListArray: [],
      categoryName: "",
      token: "",
      loadOk: false,
      dialogType: 0, //0新增分类；1：修改分类
      categoryInfo: "", //修改时临时代替
      isOpenGoods: false,
      promise: null,
      tipContent: "",
      firstClassify: "", // 上级分类
      list: [],
      pid: 0,
      level: 0, // 第几级分类
      erpStatus: 1,
    };
  },
  created() {
    this.initData();
    this.$ajax.get(
      "user/info",
      (res) => {
        console.log("user/info", res);
        this.erpStatus = res.data.erpStatus;
      },
      {}
    );
  },
  mounted() {
    window["androidCallJs"] = this.androidCallJs;
  },
  methods: {
    classifySelect(val) {
      console.log(val);
      this.pid = val;
    },
    checkMove(e) {
      console.log("Future index: " + e.draggedContext.futureIndex);
      this.lastSelectIndex = "";
      this.secondSelectIndex = "";
      this.threeSelectIndex = "";
      if (this.promise) {
        clearTimeout(this.promise);
      }
      this.promise = setTimeout(() => {
        let idList = [];
        for (let i = 0; i < this.categoryList.length; i++) {
          idList.push(this.categoryList[i].id);
        }
        this.$ajax.post(
          "goods/category/sort",
          { idList: idList.join(",") },
          (res) => {}
        );
        this.promise = null;
      }, 3000);
    },
    androidCallJs(val) {
      val = decodeURIComponent(val.replace(/\+/g, "%20"));
      let obj = this.$getJson(val);
      if (obj.code == 1017) {
        this.initData();
      } else if (obj.code == 1002) {
        this.addCategory();
      } else if (obj.goodBeanJson) {
        try {
          if (obj) {
            obj = this.$getJsonAndroidOrIOS(obj, "goodBeanJson");
            let goodId = obj.id;
            if (goodId > 0) {
              for (let i = 0; i < this.categoryList.length; i++) {
                if (this.categoryList[i].goodsList) {
                  for (
                    let j = 0;
                    j < this.categoryList[i].goodsList.length;
                    j++
                  ) {
                    if (this.categoryList[i].goodsList[j].id == goodId) {
                      this.categoryList[i].goodsList[j].brandName =
                        obj.brandName;
                      this.categoryList[i].goodsList[j].name = obj.name;
                      this.categoryList[i].goodsList[j].detail = obj.detail;
                      this.categoryList[i].goodsList[j].spec =
                        obj.specNum + "/包" + obj.rate + "/件";
                      this.categoryList[i].goodsList[j].defaultPhoto =
                        obj.pics[0];
                      break;
                    }
                  }
                }
              }
            }
          }
        } catch (e) {}
      }
    },
    refresh(item) {
      this.getGoodsList(item);
      // this.initData(0);
    },
    initData(type) {
      this.lastSelectIndex = "";
      this.secondSelectIndex = "";
      this.threeSelectIndex = "";
      this.$ajax.get(
        "goods/category/list",
        (res) => {
          type == 0 &&
            this.$refs.scroll &&
            this.$refs.scroll.finishPullToRefresh();
          if (res.code == 200) {
            this.list = [];
            this.categoryList = res.data;

            if (this.categoryList && this.categoryList.length > 0) {
              this.checkListArray = this.genrateCheckList(
                [],
                this.categoryList
              );
              // this.checkListArray.sort(function(a,b){
              //   return a.sortIndex - b.sortIndex
              // })
              // console.log(this.checkListArray)
              for (let i = 0; i < this.categoryList.length; i++) {
                this.list.push({
                  key: this.categoryList[i].id,
                  value: this.categoryList[i].name,
                });
                /* if (this.categoryList[i].id == this.lastSelectIndex.id) {
                   this.categoryList[i].expand = true;
                 } else {
                   this.categoryList[i].expand = false;
                 }*/
              }
              /*  if (this.lastSelectIndex.index > this.categoryList.length) {
                 this.lastSelectIndex.index = -1;
               }*/
            }
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
          this.loadOk = true;
        },
        {}
      );
    },
    genrateCheckList(list, cateList, level = 0) {
      for (let i = 0; i < cateList.length; i++) {
        list.push({
          key: cateList[i].id,
          value: "+".repeat(level) + cateList[i].name,
        });
        if (cateList[i].children) {
          list = this.genrateCheckList(list, cateList[i].children, level + 1);
        }
      }
      return list;
    },
    addCategory(id, cateList) {
      this.dialogType = 0;
      this.dialog = true;
      this.categoryName = "";

      this.level = id > 0 ? id : 0; // 设置父级等级
      this.demo02 = id > 0 ? id : "";
      this.list = cateList
        ? cateList.map((item) => {
            return {
              key: item.id,
              value: item.name,
            };
          })
        : [];
    },
    addCustomer(item) {
      if (this.$fromApp(this)) {
        this.$callJava({ title: item.name, id: item.id, code: 1004 });
      }
    },
    checkChange() {},
    closeDialog(event) {
      // console.log("222222", event.target.disabled);
      if (event.target.disabled) {
        return;
      }

      if (this.categoryName.trim().length == 0) {
        this.$vux.toast.text("请输入正确的分类", "center");
        return;
      }

      this.dialog = false;
      if (this.categoryName != "") {
        var pid = this.level == 0 ? 0 : this.pid;
        this.$ajax.post(
          "goods/category/create",
          { categoryName: this.categoryName, pid },
          (res) => {
            if (res.code == 200) {
              this.$vux.toast.text("新增成功", "center");
              this.initData();
            } else {
              this.$vux.toast.text(res.msg, "center");
            }
          }
        );
      }
    },
    moveDialogComfrim() {
      console.log("moveDialogComfrim", arguments);
      this.initData();
    },
    showMore(item) {
      if (this.$fromApp(this)) {
        this.$callJava({
          url:
            this.$webUrl +
            "good/zone?from=app&id=" +
            item.id +
            "&name=" +
            encodeURIComponent(item.name.toString().replace(/%/g, "~~pct~~")) +
            "&Authorization=" +
            this.$storage.get("token"),
          title: item.name,
        });
      } else {
        this.$router.push({
          path: "/good/zone",
          query: { id: item.id, title: item.name },
        });
      }
    },
    getGoodsList(item) {
      this.$ajax.get(
        "goods/category/list/goods",
        (res) => {
          this.$set(item, "goodsList", res.data);
        },
        {
          categoryId: item.id,
          pageNo: 1,
          pageSize: 5,
        }
      );
    },
    expandList(item, index) {
      this.lastSelectIndex = this.lastSelectIndex === index ? "" : index;
      this.secondSelectIndex = "";
      if (!item.goodsList) {
        this.getGoodsList(item);
      }
    },
    expandListSecond(item, index) {
      this.secondSelectIndex = this.secondSelectIndex === index ? "" : index;
      if (!item.goodsList) {
        this.getGoodsList(item);
      }
    },
    expandListThree(item, index) {
      this.threeSelectIndex = this.threeSelectIndex === index ? "" : index;
      if (!item.goodsList) {
        this.getGoodsList(item);
      }
    },
    delCategory() {
      this.dialog = false;
      let _this = this;
      setTimeout(() => {
        _this.$vux.confirm.show({
          title: "确定要删除吗",
          value: false,
          showInput: false,
          onCancel: () => {},
          onConfirm: (e) => {
            _this.$ajax.get(
              "goods/category/delVerify",
              (res3) => {
                let { hasGoods, hasChild } = res3.data;
                if (hasChild) {
                  _this.$vux.toast.text(
                    "该分类拥有下级分类，不可删除",
                    "center"
                  );
                  return;
                }
                if (hasGoods) {
                  _this.$vux.toast.text("该分类下拥有商品，不可删除", "center");
                  return;
                }
                _this.$ajax.get(
                  "goods/category/delete",
                  (res2) => {
                    console.log(res2);
                    if (res2.code == 200) {
                      _this.$vux.toast.text("删除成功", "center");
                      _this.checkListArray = [];
                      for (var i = 0; i < _this.categoryList.length; i++) {
                        if (_this.categoryList[i].id == _this.categoryInfo.id) {
                          _this.categoryList.splice(i, 1);
                        } else {
                          _this.checkListArray.push({
                            key: _this.categoryList[i].id,
                            value: _this.categoryList[i].name,
                          });
                        }
                      }
                      // item.name=e;
                      // this.$set(this.categoryList,index,item)
                    } else {
                      _this.tipContent = res2.msg;
                      if (_this.$refs.tipDialog) {
                        _this.$refs.tipDialog.showDialog();
                      }
                      //_this.$vux.toast.text(res2.msg, 'center');
                    }
                  },
                  { categoryId: _this.categoryInfo.id }
                );
              },
              { id: _this.categoryInfo.id }
            );
          },
        });
      }, 500);
    },
    updateCategory() {
      this.dialog = false;
      if (this.categoryName.trim().length == 0) {
        this.$vux.toast.text("请输入正确的分类", "center");
      } else {
        this.$ajax.post(
          "goods/category/update",
          {
            categoryId: this.categoryInfo.id,
            categoryName: this.categoryName,
            pid: this.categoryInfo.pid,
          },
          (res) => {
            if (res.code == 200) {
              this.$vux.toast.text("修改成功", "center");
              this.$set(this.categoryInfo, "name", this.categoryName);
              // for (let i = 0; i < this.categoryList.length; i++) {
              //   if (this.categoryList[i].id == this.categoryInfo.id) {
              //     this.categoryList[i].name = this.categoryName;
              //   }
              // }
              // item.name=e;
              // this.$set(this.categoryList,index,item)
            } else {
              this.$vux.toast.text(res.msg, "center");
            }
          }
        );
      }
    },
    showDeleteButton(item, index) {
      console.log("======item", item);
      this.dialogType = 1;
      this.dialog = true;
      this.categoryName = item.name;
      this.categoryInfo = item;
      // this.$vux.confirm.setInputValue(item.name);
      // clearTimeout(this.loop);
      // const _this=this;
      // console.log(this.$vux.confirm)
      // // this.loop = setTimeout(() => {
      //   this.$vux.confirm.show({
      //     title: '修改分类',
      //     value: true,
      //     "showInput": true,
      //     "inputAttrs":{
      //       maxlength:20
      //     },
      //     // showCancelButton:false,
      //     cancelText:'删除',
      //     onShow(){
      //       _this.$vux.confirm.setInputValue(item.name);
      //     },
      //
      //     onCancel: () => {
      //       setTimeout(()=>{
      //         _this.$vux.confirm.show({
      //           title: '确定要删除吗',
      //           value: true,
      //           "showInput": false,
      //           "inputAttrs":{
      //             maxlength:20
      //           },
      //           onShow(){
      //             _this.$vux.confirm.setInputValue(item.name);
      //           },
      //           onCancel: () => {
      //
      //           },
      //           onConfirm: (e) => {
      //             _this.$ajax.get("goods/category/delete",(res2)=>{
      //               console.log(res2)
      //               if(res2.code==200){
      //                 _this.$vux.toast.text('删除成功', 'center');
      //                 for(var i=0;i<_this.categoryList.length;i++){
      //                   if(_this.categoryList[i].id==item.id){
      //                     _this.categoryList.splice(i,1)
      //                   }
      //                 }
      //                 // item.name=e;
      //                 // this.$set(this.categoryList,index,item)
      //               }else{
      //                 _this.$vux.toast.text(res2.msg, 'center');
      //               }
      //             },{categoryId:item.id})
      //           }
      //         })
      //       },500)
      //
      //     },
      //     onConfirm: (e) => {
      //       this.$ajax.post("goods/category/update",{categoryId:item.id,categoryName:e},(res)=>{
      //         if(res.code==200){
      //           this.$vux.toast.text('修改成功', 'center');
      //           item.name=e;
      //           this.$set(this.categoryList,index,item)
      //         }else{
      //           this.$vux.toast.text(res.msg, 'center');
      //         }
      //       })
      //     }
      //   })
      // // }, 1000);
    },
    clearLoop(item) {
      clearTimeout(this.loop);
    },
  },
};
</script>
<style lang="less" type="text/less">
.vux-popup-dialog {
  z-index: 1001 !important;
}
.weui-cell {
  margin-left: 0 !important;
  margin-right: 0.4rem !important;
}
</style>
<style lang="less" type="text/less" scoped>
.list {
  .customer-type-name {
    font-size: 0.26rem !important;
  }
  .handle {
    width: 0.25rem !important;
    height: 0.25rem !important;
  }
  .add-customer {
    font-size: 0.18rem;
  }
  .expand {
    font-size: 0.18rem;
  }
}
.category-manager {
  background: #fff;
  .handle {
    width: 0.4rem;
    height: 0.4rem;
    padding-right: 0.3rem;
  }
  .overwrite-title-right {
    color: #fff;
    font-size: 0.32rem;
  }

  .item {
    padding: 0.45rem 0rem 0 0rem;

    /deep/ .weui-cells {
      margin-top: 0rem !important;
    }

    /deep/ .weui-cell {
      padding: 0rem !important;
    }

    /deep/ .weui-input {
      border: 1px solid #ddd;
      padding: 0.1rem;
      border-radius: 0.1rem;
      font-size: 0.24rem;
      text-align: center;
      box-sizing: border-box;
      height: 0.6rem;
    }

    .add-category {
      background: #527dd9;
      border-radius: 0.06rem;
      color: #fff;
      padding: 0.02rem 0.08rem;
      font-size: 0.28rem;
      margin: 0rem 0.1rem 0 0.2rem;
    }

    .header {
      padding: 0 0.3rem 0 0.3rem;
      padding-bottom: 0.36rem;
    }

    .customer-type-name {
      font-size: 0.34rem;
      font-weight: bold;
    }

    .add-customer {
      margin-right: 0.2rem;
    }

    .add-customer,
    .expand {
      height: 0.64rem;
      border: 1px solid #ddd;
      border-radius: 0.32rem;
      padding: 0.1rem 0.15rem 0.1rem 0.2rem;
    }

    .icon-gray,
    .icon-blue {
      fill: #999;
      vertical-align: middle;
      margin-top: -0.03rem;
    }

    .icon-blue {
      fill: #527dd9;
    }
  }

  .more {
    padding: 0.2rem;

    span {
      color: #999;
      font-size: 0.24rem;
      margin-right: 0.1rem;
    }

    svg {
      fill: #ddd;
    }
  }
}

/deep/ .weui-dialog {
  border-radius: 0.1rem;
}

.category-dialog {
  overflow: scroll;
  padding-left: 0.4rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;

  /deep/ .weui-cell__bd p {
    text-align: left;
    padding-left: 0.4rem;
    font-size: 0.34rem;
    color: #333;
  }

  /deep/
    .weui-cells_checkbox
    .weui-check:checked
    + .vux-checklist-icon-checked:before {
    color: #ff3b47;
  }

  /deep/ .weui-cells:before,
  /deep/ .weui-cell:before,
  /deep/ .weui-cells:after {
    border: none;
  }
}

.category-dialog-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 0.34rem;
}

.btn-del-category {
  flex: 1;
  color: #fff;
  background-color: #8e919f;
  margin: 0 0rem 0.4rem 0.5rem;
  border-radius: 0.42rem;
  padding: 0.14rem;
  /*height:.84rem;*/
}

.btn-save-categroy {
  flex: 1;
  color: #fff;
  margin: 0 0.5rem 0.4rem 0.5rem;
  background: rgba(82, 125, 217, 1);
  border-radius: 0.42rem;
  /*height:.84rem;*/
}

/deep/ .weui-cell {
  font-size: 0.3rem;
  border-radius: 0.1rem;
  border: 1px solid #ddd;
  margin-right: 0.56rem;
  margin-left: 0.26rem;
}

.category-title {
  font-size: 0.34rem;
  font-weight: bold;
  text-align: left;
}

.btn-comfirm {
  font-size: 0.34rem;
  font-weight: 500;
  color: #fff;
  height: 0.84rem;
  background: rgba(82, 125, 217, 1);
  border-radius: 0.42rem;
  margin: 0 0.5rem 0.4rem 0.5rem;
}

.category-input {
  text-align: left;
  padding-right: 0.1rem;
  outline: none;
  padding-left: 0.28rem;
  margin-top: 0.3rem;
  height: 0.8rem;
  width: 85%;
  border-radius: 0.05rem;
  border: 1px solid #ddd;
}

.category-input::-webkit-input-placeholder {
  color: #bbb;
}
</style>




